<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="开始日期: ">
        <el-date-picker v-model="queryParams.loginDate" type="date" placeholder="请选择开始日期" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="结束日期: ">
        <el-date-picker v-model="queryParams.loginDateEnd" type="date" placeholder="请选择结束日期" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="用户: ">
        
        <el-select v-model="queryParams.userId" placeholder="请选择用户..." style="width:10vw" clearable>
          <el-option v-for="item in userList" :key="item.userName" :label="item.userName" :value="item.userId" >
            <span style="float: left">{{ item.userName }}</span>
            <span style="float: right;color: #d8d8d9">{{ item.userAccount }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch"><el-icon>
          <Search />
        </el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- table-layout='auto'行,列,单元格的布局方式, 避免在不同浏览器中, 可能出现表头和内容错误, 
      但是!!!如果table存在多级表头,并且前几列还是固定在左边的时候, 千万不要使用auto,用fixed, 否则爽到你怀疑人生
    -->
    <div>
      <el-table 
        ref="tableRef" 
        v-loading="tableLoading" 
        :border="true" 
        class="bs-table" 
        :data="tableData" 
        row-key="id"
        :header-cell-style="{ textAlign: 'center' }" 
        :height="tableHeight" 
        :cell-style="{ textAlign: 'center' }" 
        table-layout='auto'
        >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="userAccount" label="账号" />
        <el-table-column prop="creatorName" label="用户名称" />
        <el-table-column prop="loginIP" label="登录IP地址" />
        <el-table-column prop="createTime" label="登录时间" />
      </el-table>
      <pagination v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" small="small"
        disabled="disabled" layout="total, sizes, prev, pager, next, jumper" :total="tableTotal"
        @pagination="selectByPage" />
    </div>
  </div>
</template>
<script>
import { loginRecords,userListAll } from '@/api/system/user'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      tableTotal: 0,
      tableLoading: false,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        userId: undefined,
        loginDate: undefined,
        loginDateEnd: undefined,
      },
      userList:[],
      tableHeight:(window.innerHeight - 360) + 'px',
    }
  },
  created() {
    this.selectByPage()
    userListAll().then(res=>{
      this.userList = res.data
    })
  },
  computed:{
    ...mapState(['amplify'])
  },
  mounted(){
    this.countTableHeight()
  },
  methods: {
    
    async selectByPage() {
      this.tableLoading = true;
      await loginRecords(this.queryParams)
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 1) {
            this.tableData = res.data.records;
            this.tableTotal = res.data.total;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 搜索
    onSearch() {
      this.queryParams.pageNo = 1;
      this.selectByPage();
    },
     // 表格高度
		countTableHeight(){
			let tableHeight = (window.innerHeight - 360) + 'px'
			// 计算搜索区域
			var searchContainerList =  document.getElementsByClassName("searchContainer")
			if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
          let searchContainerHeight = searchContainerList[0].offsetHeight
          // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
          let staticHeight = 60+38+30+10
          if (this.amplify == true) {
              // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
              tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
          } else {
              tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
          }
          this.tableHeight = tableHeight
      }
      console.log("表格高度=",this.tableHeight);
		},
  },
  watch: {
		amplify(newValue,oldValue) {
			this.countTableHeight()
		}
	},
}
</script>
<style scoped>
</style>